<!-- 
  Create tabs with an icon and label, using the tabs-positive style. 
  Each tab's child <ion-nav-view> directive will have its own 
  navigation history that also transitions its views in and out.
-->
<ion-view title="{{'exercise_detail' | translate}}">
	<ion-nav-buttons side="left">
		<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
	</ion-nav-buttons>	
	
	<ion-nav-buttons side="right" ng-controller="ExerciseDetailCtrl">
		<!--<a menu-toggle="right" class="button button-icon icon ion-upload" ng-click="upload()"></a>-->
		<a menu-toggle="right" class="button button-icon icon ion-gear-b" ng-click="showExerciseOptions()"></a>
	</ion-nav-buttons>
	
	<ion-tabs class="tabs-icon-top">
	  <!-- Resume Tab -->
	  <ion-tab title="{{'resume' | translate}}" icon="icon ion-document-text">
		<ion-nav-view name="tab-resume">
			<ion-view title="{{'resume' | translate}}">
				<div class="bar bar-subheader">
				  <h2 class="title">{{exercise.ex_date_time}} | {{exercise.init_time}} | {{exercise.name}}</h2>
				</div>		
							
				<ion-content class="has-header">
					<div class="row">
						<div class="col col-50">
							<h6 class='title'>{{'distance' | translate}}: {{exercise.distance}} Km's</h6>
						</div>
						<div class="col col-50">
							<h6 class='title'>{{'duration' | translate}}: {{exercise.duration}} </h6>
						</div>
					</div>
					
					<div class="row">
						<div class="col col-50">
							<h6	class='title'>{{'distance' | translate}}:</h6> <h3 class='title'>{{exercise.distance}} Km's</h3>
						</div>
						<div class="col col-50">
							<h6 class='title'>{{'duration' | translate}}:</h6> <h3 class='title'>{{exercise.duration}}</h3> 
						</div>
					</div>							
					
					<div class="row">
						<div class="col col-50">
							<h6 class='title'>Pace:</h6> <h3 class='title'>{{exercise.pace}}</h3>
						</div>
						<div class="col col-50">
							<h6 class='title'>{{'speed' | translate}}:</h6> <h3 class='title'>{{exercise.speed}} Km/h</h3>
						</div>
					</div>		


					<div class="row">
						<div class="col">
							<h3 class='title'>{{exercise.score}} {{'points' | translate}}</h3>
						</div>
					</div>		
					
				</ion-content>
			</ion-view>	
		</ion-nav-view>
	  </ion-tab>

	  <!-- Grafics Tab -->
	  <ion-tab title="{{'graphics' | translate}}" icon="icon ion-heart">
		<ion-nav-view name="tab-graphics">

			<ion-view title="Graphics">
				<ion-content>
					<div id='images'>
						<center><img src="http://www.alturarunning.bugs3.com/images/maps/{{exercise.img_route}}"></center>
					</div>
				</ion-content>
			</ion-view>	
		
		</ion-nav-view>
	  </ion-tab>
	  
	  <!-- Parcials Tab -->
	  <ion-tab title="{{'partial' | translate}}" icon="icon ion-navicon-round">
		<ion-nav-view name="tab-parcials">
			<ion-view title="Parcials">
			  <ion-content>
				<ion-list>
					<div class="row">
						<div class="col">
							Km
						</div>
						<div class="col">
							Pace	
						</div>
						<div class="col" translate="speed">
							Speed
						</div>
						<div class="col">
							hrm	
						</div>					
					</div>			
				
				  <ion-item ng-repeat="statistic in statistics" type="item-text-wrap">
					<div class="row">
						<div class="col">
							{{statistic.km}}
						</div>
						<div class="col">
							{{statistic.d_time}}
						</div>
						<div class="col">
							{{statistic.speed}}
						</div>
						<div class="col">
							{{statistic.hrm}}
						</div>					
					</div>		
				  </ion-item>
				</ion-list>
			  </ion-content>
			</ion-view>
		</ion-nav-view>
	  </ion-tab>
	  </ion-tab>
	</ion-tabs>
</ion-view>
